<template>
    <div class="render-color">
        <!-- <h2>Color</h2> -->
        <ul>
            <li v-for="item in colors" :key="item.color_id" @click="setColor(item)" :class="{ active: getColorActive(item) }">
                <el-tooltip effect="dark" :content="item.name" placement="top">
                    <span :style="{ background: item.color_num }">
                        <svg-icon name="checkbox-active-shadow" alt="" />
                    </span>
                </el-tooltip>
            </li>

            <!-- 	<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li>
			<li><span style="background:#f00"></span></li> -->
        </ul>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data () {
        return {};
    },
    computed: {
        ...mapGetters("designer", {
            colors: "getColors",
            activePiece: "getActivePiece",
            activeColor: "getActiveColor",
            activeLayer: "getActiveLayer",
        }),
    },
    methods: {
        setColor (item) {
            this.$store.commit("designer/SET_ACTIVE_COLOR", item);
        },
        getColorActive (item) {
            if (item) {
                return this.activeColor == item;
            } else {
                return false;
            }
        },
    },

    mounted () { },
};
</script>
<style lang="scss" scoped>
.render-color {
    display: flex;
    flex-direction: column;
    align-items: center;

    h2 {
        text-align: center;
        height: 14px;
        font-size: 12px;

        color: #858585;
        line-height: 14px;
    }
    ul {
        padding-top: 4px;
        margin: 0 -4px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    li {
        position: relative;
        width: 24px;
        height: 24px;
        margin: 4px;
        cursor: pointer;

        span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 2px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            cursor: pointer;
            box-sizing: border-box;

            &:hover {
                border-color: rgba(0, 0, 0, 0.5);
            }
        }
        svg {
            display: none;
            position: absolute;
            width: 18px;
            height: 18px;
            color: #fff;
            text-align: center;
            line-height: 18px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 18px;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        }
        &.active {
            span:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                background: rgba(0, 0, 0, 0.12);
            }
            svg {
                display: block;
            }
        }

        // &:hover::after{
        // 	content: '';
        // 	position: absolute;
        // 	left: 0;
        // 	top: 0;
        // 	width:100%;
        // 	height:100%;
        // 	background-color: rgba(0,0,0,0.2);
        // }
    }
}
</style>
